<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/include/header.jsp" %>
<%@ include file="/WEB-INF/jsp/include/topbar.jsp" %>
<div id="content">
<section>
<header>My Competences</header>
<div id="myCompetences">
<table dojoType="dojox.grid.DataGrid" >
  <thead>
    <tr>
      <th field="item" width="200px">Item</th>
      <th field="level" width="200px">Level</th>
    </tr>
  </thead>
</table>
</div>
</section>
<section>
<form name="createCompetenceForm" id="createCompetenceForm" method="post" action="/my/competence">
<header>New Competence:</header>
<div>Item: <input type="text" name="competence.item" id="competence.item" size="15" required/></div>
<div>
Level: <a href="javascript:nextLevel();" id="levelValue">1</a><span id="levelDesc"></span>
<input type="hidden" name="competence.level" id="competence.level" value="1"/>
</div>
<a href="javascript:saveCompetence();">Save</a>
</form>
</section>
</div>
<script type="text/javascript" src="/js/competence.js" charset="UTF-8"></script>
<%@ include file="/WEB-INF/jsp/include/footer.jsp" %>